<template>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
        <el-row>
            <el-col :span="8">
                <el-input placeholder="请输入内容">
                    <template #append>
                        <el-button>
                            <el-icon><Search /></el-icon>
                        </el-button>
                    </template>
                </el-input>
            </el-col>
        </el-row>

        <!-- 订单列表数据 -->
        <el-table :data="orderlist" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="订单编号" prop="order_number"></el-table-column>
            <el-table-column label="订单价格" prop="order_price"></el-table-column>
            <el-table-column label="是否付款" prop="pay_status">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
                    <el-tag type="danger" v-else>未付款</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否发货" prop="is_send"></el-table-column>
            <el-table-column label="下单时间" prop="create_time">
                <template #default="scope">
                    {{myFilter(scope.row.create_time)}}
                </template>
            </el-table-column>
            <el-table-column type="操作">
                <template #default="scope">
                    <el-button type="primary" @click="showBox">
                        <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button type="success" @click="showProgressBox">
                        <el-icon><Location /></el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
        v-model:currentPage="queryInfo.pagenum"
        v-model:page-size="queryInfo.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />

        <!-- 修改地址的对话框 -->
        <el-dialog
        v-model="addressVisible"
        title="修改地址"
        width="50%"
        @close="addressDialogClosed"
        >

        <el-form :model="addressForm" :rules="addressFormRules"
        ref="addressFormRef" label-width="100px"
        >
            <el-form-item label="省市区/县" prop="address1">
            <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address2">
            <el-input v-model="addressForm.address2" />
            </el-form-item>
        </el-form>

            <template #footer>
                <span class="dialog-footer">
                <el-button @click="addressVisible = false">取消</el-button>
                <el-button type="primary" @click="addressVisible"
                    >确定</el-button
                >
                </span>
            </template>
        </el-dialog>

        <!-- 展示物流进度的对话框 -->
        <el-dialog
        v-model="progressVisible"
        title="物流进度"
        width="50%"
        > 
        <el-timeline>
            <el-timeline-item
            v-for="(activity, index) in progressInfo"
            :key="index"
            :timestamp="activity.time"
            >
            {{ activity.context }}
            </el-timeline-item>
        </el-timeline>
        </el-dialog>


    </el-card>
</template>

<script>
import cityData from './citydata'

export default {
    data() {
        return {
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            total: 0,
            orderlist: [],
            addressVisible: false,
            addressForm: {
                address1: [],
                address2: ''
            },
            addressFormRules: {
                address1: [
                    {required: true, message: '请选择省市区/县',trigger:'blur'},
                ],
                address2: [
                    {required: true, message: '请填写详细地址',trigger:'blur'},
                ]
            },
            cityData,
            progressVisible: false,
            progressInfo:[]
        }
    },
    created() {
        this.getOrderList()
    },
    methods: {
        async getOrderList() {
            const {data:res} = await this.$http.get('orders',{params:this.queryInfo})
            if (res.meta.status != 200) {
                return this.$message.error('获取订单列表失败')
            }

            console.log(res)
            this.total = res.data.total
            this.orderlist = res.data.goods
            console.log(this.orderlist)
        },

        // 时间戳 => 格式化
        myFilter(date) {
            if (date === 0 || date == null) {
                return ''
            }

            const dt = new Date(date)
            const y = dt.getFullYear()
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d = (dt.getDate() + '').padStart(2, '0')
            const hh = (dt.getHours() + '').padStart(2, '0')
            const mm = (dt.getMinutes() + '').padStart(2, '0')
            const ss = (dt.getSeconds() + '').padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        },

        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getOrderList()
        },

        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getOrderList()
        },

        // 展示修改地址的对话框
        showBox() {
            this.addressVisible = true
        },

        addressDialogClosed() {
            this.$refs.addressFormRef.resetFields()
        },

        async showProgressBox() {
            const {data: res} = await this.$http.get('/kuaidi/1106975712662')

            if (res.meta.status !== 200) {
                return this.$message.error('获取物流进度失败')
            }
            this.progressInfo = res.data
            this.progressVisible = true
        },
    }
}
</script>

<style>
.el-cascader{
    width: 100%;
}
</style>